<template>
  <view>
    <!-- 搜索框 -->
    <ugo-search></ugo-search>
    <!-- 轮播图 -->
    <view>
      <u-swiper
        :list="swiperList"
        keyName="image_src"
        indicator
        indicatorMode="line"
        circular
        height="340rpx"
       ></u-swiper>
    </view>
    <!-- 金刚位 -->
    <view class="navs">
      <navigator v-for="item in navs" :key="item.name">
        <u--image :src="item.image_src" mode="widthFix" width="100%"></u--image>
      </navigator>
    </view>
    <!-- 楼层 -->
    <view class="floor">
      <view class="floor-group" v-for="item in floorList" :key="item.floor_title.name">
        <view class="floor-group-title">
          <u--image 
            :src="item.floor_title.image_src"
            mode="widthFix" 
            width="100%"
          ></u--image>
        </view>
        <view class="floor-group-content">
          <navigator v-for="(item2,index2) in item.product_list"
          :key="item2.name">
            <u--image 
              v-if="index2===0"
              :src="item2.image_src"
              mode="widthFix" 
              width="100%"
            ></u--image>
            <u--image 
              v-else
              :src="item2.image_src"
              mode="scaleToFill" 
              width="100%"
              height="188rpx"
            ></u--image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      // 轮播图数据
      swiperList:[],
      // 金刚位数据
      navs:[],
      // 楼层数据
      floorList:[]
    };
  },
  async onLoad(){
    /* 
    不需要3个异步请求 挨个 按照顺序发送出去
    同时发送请求出去 事件队列 宏任务 微任务 ，，， 
      settimeout 
      promiseAll 
     1 把三个请求都封装成单独的函数才行
    */
    // 利用Promise.all同时发出请求或setTimeout(()=>{},0)也可以同时发出请求
    Promise.all([this.getSwiperList(),this.getNavs(),this.getFloorList()])

    // 同时触发
    // this.getSwiperList()
    // this.getNavs()
    // this.getFloorList()
  },
  methods: {
    // 获取轮播图数据请求
    async getSwiperList(){
      const {message:swiperList} = await uni.$u.http.get("/home/swiperdata")
      this.swiperList = swiperList
      console.log(swiperList)
    },
    // 获取金刚位数据请求
    async getNavs(){
      const {message:navs} = await uni.$u.http.get("/home/catitems")
      this.navs = navs
    },
    // 获取楼层数据请求
    async getFloorList(){ 
      const {message:floorList} = await uni.$u.http.get("/home/floordata")
      this.floorList = floorList
    }
  }
};
</script>

<style lang="scss">
.navs{
  display: flex;
  navigator{
    flex: 1;
    padding: 10px;
  }
}
.floor{
  .floor-group{
    .floor-group-content{
      overflow: hidden;
      navigator{
        width: 232rpx;
        float: left;
        margin-left: 15rpx;
        &:nth-last-child(-n+2){
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>
